<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head profile="http://dublincore.org/documents/dcq-html/">
        
        <title>Example with click, drag events with geo search - Google maps jQuery plugin</title>
        <meta name="keywords" content="Google maps, jQuery, plugin, geo search" />
		<meta name="description" content="An example with click and drag events, geo localization and geo search using jQuery and Google maps v3" />
		<meta http-equiv="content-language" content="en"/>
		
		<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" />
		<meta name="DC.title" content="Example with click, drag events with geo search - Google maps jQuery plugin" />
		<meta name="DC.subject" content="Google maps;jQuery;plugin;geo search" />
		<meta name="DC.description" content="An example with click and drag events, geo localization and geo search using jQuery and Google maps v3" />
		<meta name="DC.creator" content="Johan S&auml;ll Larsson" />
        <meta name="DC.language" content="en"/>
        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
		
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" />
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" />
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" />	 
        <link rel="stylesheet" type="text/css" href="../thirdparty/SyntaxHighlighter/shCore.css" />
		<link rel="stylesheet" type="text/css" href="../thirdparty/SyntaxHighlighter/shThemeDefault.css" />		
		<link rel="stylesheet" type="text/css" href="css/main.css" />
        
        <script src="http://www.google.com/jsapi?key=ABQIAAAAahcO7noe62FuOIQacCQQ7RTHkUDJMJAZieEeKAqNDtpKxMhoFxQsdtJdv3FJ1dT3WugUNJb7xD-jsQ" type="text/javascript"></script>        
        <script type="text/javascript">
			google.load("maps", "3", {'other_params':'sensor=true'});
			google.load("jquery", "1.5");
			google.load("jqueryui", "1.8.9");
		</script>
        <script type="text/javascript" src="../ui/jquery.ui.map.min.js"></script>
		<script src="../thirdparty/SyntaxHighlighter/shCore.js" type="text/javascript"></script>
      	<script src="../thirdparty/SyntaxHighlighter/shAutoloader.js" type="text/javascript"></script>
		<script src="../thirdparty/SyntaxHighlighter/shBrushJScript.js" type="text/javascript"></script>
		<script src="../thirdparty/SyntaxHighlighter/shBrushXml.js" type="text/javascript"></script>
        <script type="text/javascript">
			//<![CDATA[
            $(function() {
				
				// Only for code formatting
				SyntaxHighlighter.all();
				
				$('#map_canvas').gmap( {'center': new google.maps.LatLng(55.3426606750, 18.0736160278), 'callback': function(map) {
					$(map).click( function(event) {
						$('#map_canvas').gmap('addMarker', {'position': event.latLng, 'title': '', 'draggable': true, 'bound': false}, function(map, marker) {
							$('#dialog').append('<form id="dialog'+marker.__gm_id+'" method="get" action="/" style="display:none;"><p><label for="country">Country</label><input id="country'+marker.__gm_id+'" class="txt" name="country" value=""/></p><p><label for="state">State</label><input id="state'+marker.__gm_id+'" class="txt" name="state" value=""/></p><p><label for="address">Address</label><input id="address'+marker.__gm_id+'" class="txt" name="address" value=""/></p><p><label for="comment">Comment</label><textarea id="comment" class="txt" name="comment" cols="40" rows="5"></textarea></p></form>');
							findLocation(marker.getPosition(), marker);
						}).dragend( function(event) {
							var self = this;
							findLocation(event.latLng, this);
						}).click( function() {
							openDialog(this);
						})
					});
				}});
				
				function findLocation(location, marker) {
					$('#map_canvas').gmap('search', {'location': location}, function(found, results) {
						if ( found ) {
							$.each(results[0].address_components, function(i,v) {
								if ( v.types[0] == "administrative_area_level_1" || v.types[0] == "administrative_area_level_2" ) {
									$('#state'+marker.__gm_id).val(v.long_name);
								} else if ( v.types[0] == "country") {
									$('#country'+marker.__gm_id).val(v.long_name);
								}
							});
							marker.setTitle(results[0].formatted_address);
							$('#address'+marker.__gm_id).val(results[0].formatted_address);
							openDialog(marker);
						}
					});
				}
				
				function openDialog(el) {
					$('#dialog'+el.__gm_id).dialog({'modal':true, 'title': 'Edit and save point', 'buttons': { 
						"Remove": function() {
							$(this).dialog( "close" );
							el.setMap(null);
						},
						"Save": function() {
							$(this).dialog( "close" );
						}
					}});
				}
				
            });
			//]]>
        </script>
        <style type="text/css">
			label { display:block; font-weight:bold; margin: 0 0 0.25em; }
			.txt { width: 99%; }
		</style>
    </head>
    <body>
    	
		<div id="doc">
			
			<div id="hd">
                <h1><a href="/">Google maps jQuery plugin</a> Click & Drag Events with Geo Search</h1>
            </div>
		
			<div id="dialog"></div>
			
			<div class="item gradient ui-corner-all shadow-all">
				<div id="map_canvas"></div>
			</div>
			
			<p>This example shows how to add markers to a map. Left click to add a marker. Left click on the marker to edit. Drag the marker if it's positioned wrong.</p>
			<p>This example is inspired by <a href="http://webbfunktion.com/?id=7458">webbfunktion.com example</a>(<a href="http://translate.google.com/translate?hl=sv&amp;sl=sv&amp;tl=en&amp;u=http%3A%2F%2Fwebbfunktion.com%2F%3Fid%3D7458">translated</a>)</p>

			<h2>Using jquery with Google maps</h2>
			<p>
				Download <a href="http://jquery.com/">jQuery 1.4.X or higher</a> and <a href="http://jqueryui.com/">jQuery UI 1.8.X or higher</a> or
				use <a href="http://code.google.com/intl/sv-SE/apis/libraries/devguide.html">Googles</a> or <a href="http://www.asp.net/ajaxlibrary/cdn.ashx">Microsofts</a> 
				<abbr title="Content delivery network"><a href="http://en.wikipedia.org/wiki/Content_delivery_network">CDN</a></abbr>.
			</p>
			
			<div class="prettyprint">
				<pre class="brush: xml">
&lt;script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="PATH_TO_PLUGIN/jquery.ui.map.js" type="text/javascript"&gt;&lt;/script&gt;</pre>
			</div>
			
			<div class="prettyprint">
				<pre class="brush: js">
&lt;script type="text/javascript"&gt;
	$(function() {
		
		$('#map_canvas').gmap( {'center': new google.maps.LatLng(55.3426606750, 18.0736160278), 'callback': function(map) {
			$(map).click( function(event) {
				$('#map_canvas').gmap('addMarker', {'position': event.latLng, 'title': '', 'draggable': true, 'bound': false}, function(map, marker) {
					$('#dialog').append('&lt;form id="dialog'+marker.__gm_id+'" method="get" action="/" style="display:none;"&gt;&lt;p&gt;&lt;label for="country"&gt;Country&lt;/label&gt;&lt;input id="country'+marker.__gm_id+'" class="txt" name="country" value=""/&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="state"&gt;State&lt;/label&gt;&lt;input id="state'+marker.__gm_id+'" class="txt" name="state" value=""/&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="address"&gt;Address&lt;/label&gt;&lt;input id="address'+marker.__gm_id+'" class="txt" name="address" value=""/&gt;&lt;/p&gt;&lt;p&gt;&lt;label for="comment"&gt;Comment&lt;/label&gt;&lt;textarea id="comment" class="txt" name="comment" cols="40" rows="5"&gt;&lt;/textarea&gt;&lt;/p&gt;&lt;/form&gt;');
					findLocation(marker.getPosition(), marker);
				}).dragend( function(event) {
					var self = this;
					findLocation(event.latLng, this);
				}).click( function() {
					openDialog(this);
				})
			});
		}});
		
		function findLocation(location, marker) {
			$('#map_canvas').gmap('search', {'location': location}, function(results) {
				$.each(results[0].address_components, function(i,v) {
					if ( v.types[0] == "administrative_area_level_1" || v.types[0] == "administrative_area_level_2" ) {
						$('#state'+marker.__gm_id).val(v.long_name);
					} else if ( v.types[0] == "country") {
						$('#country'+marker.__gm_id).val(v.long_name);
					}
				});
				marker.setTitle(results[0].formatted_address);
				$('#address'+marker.__gm_id).val(results[0].formatted_address);
				openDialog(marker);
			});
		}
		
		function openDialog(el) {
			$('#dialog'+el.__gm_id).dialog({'modal':true, 'title': 'Edit and save point', 'buttons': { 
				"Remove": function() {
					$(this).dialog( "close" );
					el.setMap(null);
				},
				"Save": function() {
					$(this).dialog( "close" );
				}
			}});
		}
		
	});
&lt;/script&gt;</pre>
			</div>
			
			<h2>More Google maps and jQuery examples</h2>
			<ul>
				<li><a href="jquery-mobile-example.html">Google maps with jQuery mobile example</a></li>
				<li><a href="advanced-example.html">Microformats, Google streetview and jQuery dialog example</a></li>
				<li><a href="load JSON example.html">Import markers with JSON example</a></li>
				<li><a href="load Microformat example.html">Import markers with microformats example</a></li>
				<li><a href="load RDFa example.html">Import markers with RDFa example</a></li>
				<li><a href="load Microdata example.html">Import markers with microdata example</a></li>
				<li><a href="load Fusion.html">Import markers with Google Fusion tables</a></li>
				<li><a href="multiple maps example.html">Multiple maps on a single page example</a></li>
				<li><a href="basic-example.html">Google maps and jQuery example</a></li>
				<li><a href="google-maps-jquery-filtering.html">Filter markers example</a></li>
				<li><a href="google-maps-jquery-markerclusterer.html">Marker Clusterer Utility</a></li>
			</ul>
			
			<div id="ft" class="hidden">
				Author: 
				<div id="hcard-Johan-Säll-Larsson" class="vcard">
					<span class="fn n">
						<span class="given-name">Johan</span> 
						<span class="family-name">Säll Larsson</span>
					</span>
					<span class="adr">
						<span class="locality">Göteborg</span>,
						<span class="country-name">Sweden</span>
					</span>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
			document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
		<script type="text/javascript">
			try {
				var pageTracker = _gat._getTracker("UA-17614686-3");
				pageTracker._trackPageview();
			} catch(err) {}
		</script>
    </body>
</html>